<div *ngIf="!options?.hideHeader" class="pac-widget__header ngm-card-header flex justify-start items-center">
  <span>{{options?.name}}
    <span *ngIf="options?.unit">{{ 'STORY.WIDGETS.AccountingStatement.Unit' | translate: {Default: 'Unit'} }}: {{options.unit}}</span>
  </span>

  <span style="flex: 1;"></span>

  <div class="pac-widget__action-toolbar flex justify-between items-center">
    <button mat-icon-button [color]="(hasSlicers$ | async) ? 'accent':''" [matMenuTriggerFor]="filtersMenu">
      <mat-icon fontSet="material-icons-outlined">filter_alt</mat-icon>
    </button>
    <!-- Internal Error -->
    <button mat-icon-button *ngIf="error$ | async as error" color="error"
      [matTooltip]="error">
      <mat-icon fontSet="material-icons-outlined">warning</mat-icon>
    </button>
    <!-- Loading spinner icon -->
    <mat-spinner class="ngm-analytical-card--loading"
      [style.opacity]="(isLoading$ | async) ? '1' : '0'"
      [style.visibility]="(isLoading$ | async) ? 'visible' : 'hidden'"
      [diameter]="18"
      [strokeWidth]="1"
      >
    </mat-spinner>
  </div>
</div>

<div class="flex-1 overflow-auto">
  <table mat-table *ngIf="columnConfig$ | async as columnConfig" class="mat-elevation-z w-full"
    [displayDensity]="styling?.appearance?.displayDensity"
    [dataSource]="tableData$ | async">

    <!-- Group Column -->
    <ng-container *ngIf="columnConfig.hasGroup" matColumnDef="_group_">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row">
        {{ row.groupName }}
      </td>
    </ng-container>
  
    <!-- Name Column -->
    <ng-container matColumnDef="_name_">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row"
        [class.text-right]="row.isItalic"> {{row.name}} </td>
    </ng-container>
  
    <ng-container *ngFor="let col of columnConfig.columns" [matColumnDef]="col.name">
      <th mat-header-cell *matHeaderCellDef> {{col.label}} </th>
      <td mat-cell *matCellDef="let row">
        <span *ngIf="col.isRatio" [semanticColor]="(row.reverseSemanticColor || col.reverseSemanticColor) ? -row.data[col.name] : row.data[col.name]"
            >{{row.data[col.name]*100 | number:col.digitsInfo}}%</span>
          
        <ng-container *ngIf="!col.isRatio">
          <span *ngIf="!IsNil(row.data?.[col.name])">{{ (row.data[col.name] / (options.denominator || 1)) | number: col.digitsInfo || options?.digitsInfo }}</span>
          <span *ngIf="IsNil(row.data?.[col.name])" class="empty">-</span>
        </ng-container>
      </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="columnConfig.displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: columnConfig.displayedColumns;"
      [ngClass]="{'pac-widget-accounting-statement__underline': row.isUnderline, 'pac-widget-accounting-statement__italic': row.isItalic}"></tr>
  </table>
</div>

<div *ngIf="error$ | async as error" class="ngm-card-error absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center backdrop-blur-md bg-white/10">
  <span class="text-2xl font-notoColorEmoji">🐞</span>
  <div class="overflow-auto whitespace-pre-wrap">
      {{ error }}
  </div>
</div>

<mat-menu #filtersMenu="matMenu" class="pac-widget__slicer-menu">
  <ngm-slicers inline editable [slicers]="selectOptions$ | async"
    [dataSettings]="dataSettings$ | async"
    [limit]="5"
    (valueChange)="setSelectOptions($event)"
    (click)="$event.stopPropagation()"
  ></ngm-slicers>
</mat-menu>

<div *ngIf="placeholder$ | async" class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
  <pac-placeholder-add></pac-placeholder-add>
  <span class="ngm-story-widget__placeholder-title">{{ 'Story.Widgets.AccountingStatement.Title' | translate: {Default: 'Accounting Statement'} }}</span>
</div>
